<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div style="width: 100%; text-align: right">
        <!-- <span style="margin-top: 2rem;float: left">位置</span> -->
        <el-button type="text" @click="dialogTableVisible = true">
          <el-button
            type="primary"
            class="login_btn"
            @click="login"
            v-show="!isLogin"
            >请登录</el-button
          >
        </el-button>

        <!-- Dialog -->
        <el-dialog
          :visible.sync="dialogTableVisible"
          style="text-align: center"
        >
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin: 0px; padding: 0px"
          >
          </el-breadcrumb>
          <!-- 登录表单 -->
          <el-form
            :model="loginForm"
            status-icon
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="账号" prop="username">
              <el-input
                type="username"
                v-model="loginForm.Username"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                type="password"
                v-model="loginForm.Password"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <!-- 提交、重置按钮 -->
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="primary" @click="resetLoginForm">重置</el-button>
            <el-button type="primary" round @click="register">注册</el-button>
          </el-form>
        </el-dialog>
        <!-- Dialog END -->

        <el-dropdown style="margin-top: 0.8rem">
          <el-button type="primary" v-show="isLogin">
            {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="toUserInfo">个人信息</el-dropdown-item>
            <el-dropdown-item @click.native="loginStaClose()">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" class="login_btn" @click="order"
          >我的订单</el-button
        >
        <el-button type="primary" class="login_btn" @click="toTrolley"
          >我的购物车</el-button
        >
        <table style="position: absolute; top: 0.6rem; left: 45%">
          <tr>
            <td style="background-color: white">
              <el-input
                width="100px"
                placeholder="请输入内容"
                clearable
                class="input_search"
                style="border: none"
                v-model="select"
              >
              </el-input>
            </td>
            <td class="but_primary" style="background-color: #409eff">
              <el-button type="primary" @click="SelectOne()"
                >点击搜索</el-button
              >
            </td>
          </tr>
        </table>
      </div>
      <img
        src="../assets/logo.png"
        alt=""
        class="img"
        style="
          height: 50px;
          float: left;
          position: absolute;
          left: 1rem;
          top: 0.25rem;
        "
      />
    </el-header>
    <!-- 主体 -->
    <el-main style="padding: 0px">
      <router-view></router-view>
    </el-main>
    <!-- 底部 -->
    <el-footer>
      <div>
        <span style="margin-left: 500px">ICP备案号</span>
        <span style="margin-left: 800px">公安备案号</span>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
// Dialog 
import { Login } from "../api/home"
import { getRefresh } from "../Utils/auth"
// Dialog END

export default {
  data () {
    return {
      // Dialog 
      dialogTableVisible: false,
      loginForm: {
        Username: "",
        Password: "",
      },
      //   表单验证
      rules: {
        //   验证用户名
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 7, message: "长度在 2 到7 个字符", trigger: "blur" },
        ],
        // 验证密码
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" },
        ]
      },
      // Dialog End

      isLogin: false,
      username: 'asdfa',
      isReload: true,
      imgList: [
        { url: require("../assets/logo.png") },
        { url: require("../assets/logo.png") },
      ],
      select: "",
    };
  },
  methods: {
    // Dialog
    //   重置
    resetLoginForm () {
      this.loginForm.Username = "",
        this.loginForm.Password = ""
    },
    toUserInfo(){
      this.$router.push('userinfo')
    },
    //   登录验证
    submitForm () {
      console.log(Login);
      console.log(this.loginForm);
      if (this.loginForm.Username.trim() == "" || this.loginForm.Password.trim() == "") {
        alert("账号或密码不能为空")
      }
      else {
        Login(this.loginForm).then((res) => {
          if (res.data.code == 1002) {
            alert("账号密码错误或改用户被封禁，请确认后重试")
          } else {
            console.log(res.data.data);
            alert("登录成功");
            localStorage.setItem("accessToken", res.data.data.token);
            localStorage.setItem("refreshToken", res.data.data.refreshToken)
            localStorage.setItem("Id", res.data.data.id)
            localStorage.setItem("Username", this.loginForm.Username)
            this.dialogTableVisible = false
            this.loginSta()
          }
        })
      }


    },
    register () {
      this.$router.push('/register')
      this.dialogTableVisible = false;
    }
    ,
    toHome () {
      window.$router.push('/')
    },
    // Dialog End

    // 登录状态
    loginSta () {
      let id = localStorage.getItem("Id");
      let username = localStorage.getItem("Username")
      if (id !== null && id !== undefined) {
        this.isLogin = true;
        this.username = username;
        if (this.isReload) {
          location.reload();
        }
      }
    },
    // 退出登录
    loginStaClose () {
      localStorage.removeItem("Username");
      localStorage.removeItem("Id");
      localStorage.removeItem("accessToken");
      localStorage.removeItem("refreshToken");
      this.$router.push('/')
      location.reload();
    },

    login () {
      this.dialogTableVisible = true;
    },
    order () {
      this.$router.push("/order");
    },
    toTrolley () {
      this.$router.push('trolley')
    },
    reloadLoginInfo () {
      let id = localStorage.getItem("Id");
      let username = localStorage.getItem("Username")
      if (id !== null && id !== undefined) {
        this.isLogin = true;
        this.username = username;
      }
    }
  },
  mounted () {
    this.reloadLoginInfo();
  }
};
</script>

<style scoped>
.input_search {
  width: 100%;
  border: none;
}
.el-header {
  background-color: whtie;
  /* height: 170px !important; */
}
.el-aside {
  background-color: aqua;
  height: 504px;
  width: 150px !important;
  margin-top: -20px;
  margin-left: -20px;
}
.el-main {
  background-color: #f3f0ef;
  height: 845px;
}
.el-footer {
  background-color: rgb(245, 250, 250);
  position: absolute;
  bottom: 0rem;
  width: 100%;
  padding-top: 1rem;
}
.btn1 {
  left: 70%;
}
.car {
  position: absolute;
  left: 85%;
}
.btn2 {
  left: 80%;
}
.img {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 55px;
}
.btn3 {
  position: absolute;
  left: 54%;
  top: 63px;
}
.guessyou {
  font-size: 24px;
  color: #111;
  font-weight: bold;
  line-height: 24px;
}
.card1 {
  margin-left: 50px;
  margin-top: 50px;
}
.card2 {
  margin-left: 300px;
  margin-top: -375px;
}
.card3 {
  margin-left: 550px;
  margin-top: -375px;
}
.card4 {
  margin-left: 800px;
  margin-top: -375px;
}
.card5 {
  margin-left: 1050px;
  margin-top: -375px;
}
.card6 {
  position: absolute;

  top: 110%;
  margin-left: 50px;
}
.card7 {
  position: absolute;
  top: 110%;
  left: 40%;
  margin-left: 50px;
}
.card8 {
  position: absolute;
  left: 60%;
  top: 110%;
  margin-left: 50px;
}
.card9 {
  position: absolute;
  left: 80%;
  top: 110%;
  margin-left: 50px;
}
.card10 {
  position: absolute;
  left: 20%;
  top: 110%;
  margin-left: 50px;
}
/* .card11{
 height: 50px;
} */
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.carousel {
  width: 1500px !important;
  margin-left: 500px;
}
.login_btn {
  margin-left: 1rem;
}
</style>
